<script setup>
import ShortCut2 from "@/components/ShortCut2.vue";
</script>

<template>
<div>
    <ShortCut2></ShortCut2>
  <div class="own">
    <!-- 左侧栏目开始 -->
    <div class="AccountlistorderL">
      <div class="Accountlistorder">
        <ul>
          <li class="Ttopnone">
            <a href="javascript:void(0)"
              ><span class="order">个人中心</span></a
            >
          </li>
          <li class="T">订单管理</li>
          <li><a href="javascript:void(0)">订单发货情况</a></li>
          <li><a href="javascript:void(0)">收货地址簿</a></li>
          <li class="T">我的账户</li>
          <li><a href="javascript:void(0)">账户余额</a></li>
          <li><a href="javascript:void(0)">我的优惠券</a></li>
          <li class="T">我的商品</li>
          <li><a href="javascript:void(0)">写书评</a></li>
          <li><a href="javascript:void(0)">我的书评</a></li>
          <li class="T">个人信息</li>
          <li><a href="javascript:void(0)">编辑个人档案</a></li>
          <li><a href="javascript:void(0)">修改密码</a></li>
          <li class="Tnone">
            <a href="/login" style="font-weight: bold"
              >退出登录</a
            >
          </li>
        </ul>
      </div>
      <!-- 左侧栏目结束 -->
    </div>
    <div class="Mposition">
      <div class="PersonalAccount">
        <div class="Useravatar">
          <div class="portraitWrap">
            <img src="https://www.bookschina.com/ViewOrder/images/userw.jpg" />
            <span>设置头像</span>
          </div>
          <a href="javascript:void(0)">上传头像</a>
        </div>
        <div class="AccountView">
          <div class="UsernameView">
            <span class="orderTB">欢迎，haha</span>
          </div>

          <div class="WarnFramework">
            <div class="warn">
              <ul>
                <li class="TB">交易提醒：</li>
                <li>
                  <a target="_blank" href="javascript:void(0)"
                    >待支付订单</a
                  >(0)
                </li>
                <li>
                  <a target="_blank" href="javascript:void(0)"
                    >待收货订单</a
                  >(0)
                </li>
                <li>
                  <a target="_blank" href="javascript:void(0)"
                    >待评论商品</a
                  ><span class="amountB">(0)</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</template>

<style scoped>
.own {
  width: 1000px;
  margin: 0 auto;
}
.AccountlistorderL {
  width: 182px;
  float: left;
}
.Accountlistorder {
  width: 180px;
  float: left;
  border: #bcd9fa 1px solid;
  display: inline;
  list-style: none;
}
.Accountlistorder ul {
  margin: 0;
  padding: 0;
}
.Accountlistorder ul li.Ttopnone {
  padding-left: 5px;
  line-height: 30px;
  background: url(/images/head/Partbg.jpg) repeat-x right;
  font-size: 14px;
  font-weight: 700;
  color: #000;
}
.order {
  color: #000;
  background: url(http://o.bookschina.com/images/Head/lacedown.jpg) no-repeat
    left;
  font-size: 14px;
  font-weight: bold;
  padding: 0 0 0 10px;
}
.Accountlistorder ul li.T {
  background-color: #ecf4ff;
  padding-left: 16px;
  line-height: 30px;
  line-height: 30px;
}
.Accountlistorder ul li {
  text-align: left;
  padding-left: 16px;
  line-height: 26px;
  font-size: 12px;
  font-weight: 700;
  color: #4c4c4c;
  list-style: none;
}
.Accountlistorder ul li a {
  font-weight: 400;
  padding-left: 10px;
  color: #636363;
}
.Accountlistorder ul li.Tnone {
  background-color: #ecf4ff;
  padding-left: 16px;
  line-height: 30px;
}
.Mposition {
  float: left;
  width: 600px;
  margin: 0 15px;
  display: inline;
}
.PersonalAccount {
  float: left;
  width: 804px;
  background-color: #f9fcff;
  padding: 10px 0 20px 0;
}
.Useravatar {
  float: left;
  margin: 0 9px 0 19px;
  color: #4c4c4c;
  display: inline;
}
.portraitWrap {
  position: relative;
  cursor: pointer;
}
.Useravatar img {
  border: 1px #ccc solid;
  width: 75px;
  height: 75px;
  margin: 0 0 10px 0;
}
.portraitWrap span {
  position: absolute;
  left: 0;
  bottom: 6px;
  background: #8a8a8a;
  width: 100%;
  height: 26px;
  line-height: 26px;
  color: #fff;
  font-size: 12px;
  font-family: SimHei;
  cursor: pointer;
  display: none;
}
.Useravatar a {
  color: #36c;
}
.AccountView {
  float: left;
  width: 470px;
  margin: 0 15px 0 0;
  display: inline;
}
.UsernameView {
  float: left;
  width: 470px;
  text-align: left;
  height: 35px;
}
.orderTB {
  font-size: 14px;
  font-weight: 700;
  color: #4c4c4c;
  padding-left: 20px;
}
.itemlistL {
  float: left;
  width: 200px;
  text-align: left;
  margin: 0 auto;
}
.itemlistL ul {
  margin: 0 0 0 20px;
  list-style: none;
}
.itemlistL ul li {
  color: #4c4c4c;
  line-height: 25px;
}
.ordermoney {
  font-size: 12px;
  color: #c33;
  font-family: Arial, Helvetica, sans-serif;
}
.WarnFramework {
  float: left;
  width: 440px;
  background-color: #fff;
  border: #e4efff 1px solid;
  text-align: left;
  padding: 0 18px 0 10px;
  margin: 10px 0 0 0;
}
.warn {
  float: left;
  border-bottom: #ccc dotted 1px;
  width: 440px;
  color: #4c4c4c;
  text-align: left;
}
.warn ul {
  margin: 0;
}
.warn ul li.TB {
  font-weight: 700;
}
.warn ul li {
  float: left;
  margin: 0 0 0 10px;
  list-style: none;
  line-height: 35px;
  display: inline;
}
</style>
